﻿.arithmetic-container {
    width: 100%;
    height: 100%;
    border: 2px dashed black;
}

    .arithmetic-container .title {
        position: absolute;
        right: 0;
        padding: 8px;
        text-align: right;
        border-left: 2px dashed black;
        border-bottom: 2px dashed black;
    }

::deep .diagram-port {
    position: absolute;
    width: 30px;
    height: 20px;
    background-color: black;
    left: 50%;
    transform: translate(-50%, -50%);
}

    ::deep .diagram-port.top {
        border-top-left-radius: 50%;
        border-top-right-radius: 50%;
        top: -10px;
    }

    ::deep .diagram-port.bottom {
        border-bottom-left-radius: 50%;
        border-bottom-right-radius: 50%;
        bottom: -30px;
    }
